<template>
  <div class="searchbefore">
    <div class="search-header">
      <van-icon
        class="back"
        name="arrow-left"
        @click="$router.push('./home')"
      />
      <van-search
        class="vansearch"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="value ? $router.push('./search?key=' + value) : ''"
      >
        <template #action>
          <div @click="value ? $router.push('./search?key=' + value) : ''">
            搜索
          </div>
        </template>
      </van-search>
    </div>
    <!-- $router.push({path: '/search', query: { key: value }}) -->

    <div class="find">
      <div class="title">
        <div class="lefttitle">搜索发现</div>
        <!-- <div class="change"><span>换一换</span><van-icon class="replay" name="replay" /></div> -->
      </div>
      <div class="keyword">
        <span
          class="word"
          :class="word.vlag"
          v-for="word in keylist"
          :key="word"
          @click="$router.push('./search?key=' + word.val)"
          >{{ word.val }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      //keylist:[{vlag:'',val:'耐克 dunk'},'nike板鞋','彪马卫衣男','斯凯奇男鞋','夹克外套女','匡威女鞋高帮','阿迪达斯鞋','cuury','富士山','乔丹篮球','aj灰白','闪击5','女生鞋'],
      keylist: [
      { vlag: "hot", val: "椰子水" },
        { vlag: "hot", val: "啤酒" },
        { vlag: "", val: "奶粉" },
        { vlag: "", val: "果汁" },
        { vlag: "", val: "饼干" },
        { vlag: "", val: "盐" },
        { vlag: "hot", val: "自热米饭" },
        { vlag: "", val: "六必居" },
        { vlag: "", val: "果仁张" },
        { vlag: "", val: "面膜" },
        { vlag: "", val: "牙膏" },
        { vlag: "", val: "毛巾" },
        { vlag: "", val: "可乐" },
        { vlag: "", val: "咖啡" },
        { vlag: "hot", val: "茶" },
      ],
      value: "",
    });
    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  .lefttitle {
    font-weight: 600;
  }
  .change,
  .replay {
    color: #aaa;
  }
}
.search-header {
  display: flex;
  background: #fff;
  position: relative;
  z-index: 10;
  .vansearch {
    flex-grow: 1;
  }
  .back {
    line-height: 5.4rem;
    padding: 0 1rem;
    font-size: 1.8rem;
  }
}
.keyword {
  .word {
    padding: 0.5rem 1rem;
    margin: 0.6rem;
    background: #f2f2f2;
    display: inline-block;
    font-size: 1.3rem;
  }
  .hot {
    color: #f60;
    background: #ffeded;
  }
}
</style>
